<template>
  <div class="updateAdd">
    <div class="updateTool">
      <el-button size="mini" @click="backFun" type="primary">返回</el-button>
      <el-button @click="submitForm" size="mini" type="primary">保存</el-button>
    </div>
    <el-form ref="form" :model="form" label-width="80px" size="mini">
      <el-form-item label="标题">
        <el-input v-model="form.title" style="width:200px"></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-radio-group v-model="form.type">
          <el-radio :label="1" :disabled="isUpdate">文本</el-radio>
          <el-radio :label="2" :disabled="isUpdate">附件</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="内容" v-show="form.type===1">
        <!-- <el-input type="textarea" v-model="form.context" style="width:360px"></el-input> -->
        <Tinymce ref="editor" v-model="form.context" :height="400"></Tinymce>
      </el-form-item>
      <el-form-item label="内容" v-show="form.type===2">
        <Upload
          :listType="listType"
          :fileList="cFileList"
          @listClick="listClick"
          @successLoad="successLoadFun"
          ref="upload"
        ></Upload>
      </el-form-item>
      <el-form-item label="附件">
        <Upload
          :listType="listType"
          @successLoad="successLoadFun"
          ref="labelUpload"
          :fileList="clabelUploadList"
        ></Upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { axiosSaveOrUpdate } from "@/api/portalPublic";
import Upload from "@/components/portalUpload";
import Tinymce from "@/components/Tinymce";
import { createFormData, createFileList } from "./createStore";
export default {
  name: "updateAdd",
  components: {
    Upload,
    Tinymce
  },
  created () {
    console.log(this.form);
  },
  props: {
    form: {
      type: Object,
      default: () => ({})
    },
    status: {
      type: String,
      default: "add"
    },
    fileList: {
      type: Array,
      default: () => []
    },
    labelList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    cFileList () {
      let list = this.fileList;
      return createFileList(this.status, list);
    },
    clabelUploadList () {
      let list = this.labelList;
      return createFileList(this.status, list);
    },
    isUpdate () {
      return this.status === "update";
    }
  },
  data () {
    return {
      listType: "text",
      loading: null,
      origalForm: JSON.parse(JSON.stringify(this.form))
    };
  },
  methods: {
    successLoadFun (fileList) {
      console.log(fileList);
    },
    listClick (file) {
      console.log(file);
    },
    backFun () {

      if (this.status === "update") {
        if (JSON.stringify(this.form) !== JSON.stringify(this.origalForm)) {
          this.$confirm("内容已经发生了改变,是否返回?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.$emit("back");
          })["catch"](() => {
            console.log("不返回");
          });
        } else {
          this.$emit("back");
        }
      } else {
        this.$emit("back");
      }
    },
    submitForm () {
      let uploadData = this.$refs.upload.uploadList || [];
      let labelUploadData = this.$refs.labelUpload.uploadList || [];
      this.form = createFormData(this.form, uploadData, labelUploadData);
      this.loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      axiosSaveOrUpdate(this.form).then(res => {
        if (res.status === 200 && res.data.code === 0) {
          this.$message({
            message: res.data.data,
            type: "success"
          });
          this.loading.close();
          this.$emit("save");
        } else {
          this.$message({
            message: "保存失败!",
            type: "error"
          });
          this.loading.close();
        }

      });
    }
  }

};
</script>

<style lang="less" scoped>
.updateAdd {
  height: 100%;
  width: 100%;
  padding-right: 40px;
  .updateTool {
    margin-bottom: 10px;
  }
  .area {
    height: 182px;
    margin-bottom: 10px;

    .upload-demo {
      margin-left: 80px;
      height: 100%;
      position: relative;
      /deep/ .el-upload {
        float: left;
        margin-right: 10px;
      }
      /deep/ .el-upload-list {
        float: left;
        height: 100%;
        overflow: auto;
      }
    }
    .last-upload {
      margin-left: 0;
    }
    /deep/ .el-textarea__inner {
      height: 182px;
    }
  }
  /deep/ .last-area {
    > .el-form-item {
      height: 100%;
      > .el-form-item__content {
        height: 100% !important;
      }
    }
  }
}
</style>